<template>
  <div>
    <div class="portals-card">
      <div class="header">
        <div class="title">基本信息</div>
        <!--        <div v-if="details.status < 4" class="time">-->
        <!--          <i class="img icon-clock"></i>-->
        <!--          <span>处理剩余时限：</span>-->
        <!--          <span v-if="details.status === 3" class="color-danger">{{ details.deadline | timeRemainingDHMS }}</span>-->
        <!--          <span class="color-danger">{{ details.currentStepDeadline | timeRemainingDHMS }}</span>-->
        <!--        </div>-->
      </div>
      <el-form class="key-value" label-width="110px" label-suffix="：">
        <el-form-item label="案件编号">{{ details.workOrderNumber || "-" }}</el-form-item>
        <el-form-item label="案件名称">{{ details.title }}</el-form-item>
        <!--        <el-form-item label="投诉对象类型">{{ details.complaint | workOrderComplaintObjectType }}</el-form-item>-->
        <el-form-item label="案件类型">{{ details.itemDetailName }}</el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="案件来源">{{ details.itemSource | workOrderEventSource }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发生地">{{ details.address }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投诉对象">{{ details.addressDepartmentName }}</el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="通讯地址">{{ details.mailAddress || "-" }}</el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="主管单位">{{ details.acceptDepartment }}</el-form-item>
            <el-form-item label="办结时间">{{ workOrderProcessResult.createTime || "-" }}</el-form-item>
            <el-form-item label="案件状态">
              <span v-if="details.status === 0">待受理</span>
              <span v-if="(details.status >= 1 && details.status <= 4) || details.status === 7">受理中</span>
              <span v-if="details.status === 5">已办结</span>
              <span v-if="details.status === 6">不受理</span>
            </el-form-item>
            <el-form-item label="立案时间">{{ details.filingTime || "-" }}</el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="承办单位">{{ details.processDepartment || "-" }}</el-form-item>
            <el-form-item label="实际用时">{{ actualProcessDay }}</el-form-item>
            <el-form-item label="公开状态">
              <template v-if="details.status < 4">-</template>
              <template v-else>
                {{ details.publicStatus | workOrderPublicStatus }}
              </template>
            </el-form-item>
            <el-form-item label="涉及欠款">{{ details.debtAmount ? "是" : "否" }}</el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="发布时间">{{ details.createTime }}</el-form-item>
            <el-form-item label="评价时间">{{ workOrderAppraise.createTime || "-" }}</el-form-item>
            <el-form-item label="">&nbsp;</el-form-item>
            <el-form-item label="欠款金额">{{ details.debtAmount | unitMoney }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="portals-card" style="margin-top: 20px">
      <div class="header">
        <div class="title">举报信息</div>
      </div>
      <el-form class="key-value" label-width="100px">
        <el-form-item label="主要诉求："><div v-html="txt2HTML(details.mainApply)"></div></el-form-item>
        <el-form-item label="事实理由："><div v-html="txt2HTML(details.factReason)"></div></el-form-item>
      </el-form>
    </div>

    <el-table v-if="details.attachmentList && details.attachmentList.length" :data="details.attachmentList" size="mini" style="margin-top: 10px">
      <el-table-column prop="fileName" label="附件名称"></el-table-column>
      <el-table-column prop="fileName" label="文件名称"></el-table-column>
      <el-table-column label="操作" width="160px" align="center">
        <template slot-scope="{ row }">
          <el-button @click="handleDownload(row)" type="primary" plain size="mini">下载</el-button>
          <el-button @click="handlePreview(row)" type="primary" plain size="mini">预览</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template v-if="details.workOrderSubmitFinishResult">
      <div class="portals-card" style="margin-top: 20px">
        <div class="header">
          <div class="title">办结信息</div>
        </div>
        <el-form class="key-value" label-width="120px">
          <el-form-item label="提交办结类型：">{{ workOrderSubmitFinishResult.reason }}</el-form-item>
        </el-form>
        <el-form class="key-value" label-width="120px">
          <el-form-item label="提交办结理由："><div v-html="txt2HTML(workOrderSubmitFinishResult.comment)"></div></el-form-item>
        </el-form>
      </div>

      <!--      <el-table v-if="workOrderSubmitFinishResult.attachmentList && workOrderSubmitFinishResult.attachmentList.length" :data="workOrderSubmitFinishResult.attachmentList" size="mini" style="margin-top: 10px">-->
      <!--        <el-table-column prop="fileName" label="附件"></el-table-column>-->
      <!--        <el-table-column prop="fileName" label="文件名称"></el-table-column>-->
      <!--        <el-table-column label="操作" width="160px" align="center">-->
      <!--          <template slot-scope="{row}">-->
      <!--            <el-button @click="handleDownload(row)" type="primary" plain size="mini">下载</el-button>-->
      <!--            <el-button @click="handlePreview(row)" type="primary" plain size="mini">预览</el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->
    </template>

    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL" width="900px"></previewDialog>
  </div>
</template>

<script>
import * as portalsApi from "@/api/portals";
import { downloadFile, getCMSUserInfo, isEmpty, postPortalsHeight } from "@/utils/common";
import previewDialog from "@/views/workOrder/components/previewDialog";
import { workOrderEventSource, workOrderStatus, timeRemaining, workOrderCreatorType, workOrderPublicStatus, workOrderPublicIntention, timeRemainingDHMS, hourMinute, filename, timeFormatDHMS, txt2HTML, workOrderComplaintObjectType, unitMoney } from "@/utils/filters";
import * as fileApi from "@/api/file";

export default {
  name: "workOrderDetails",
  components: { previewDialog },
  filters: {
    workOrderEventSource,
    workOrderStatus,
    timeRemaining,
    workOrderCreatorType,
    workOrderPublicStatus,
    workOrderPublicIntention,
    timeRemainingDHMS,
    hourMinute,
    workOrderComplaintObjectType,
    unitMoney,
  },
  data() {
    return {
      commentsLoading: false,
      loading: false,
      details: {},
      comments: [],
      form: {
        comment: "",
      },
      replayObject: {},
      listItemMsg: "",
      previewDialog: {
        fileURL: "",
        visible: false,
      },
    };
  },
  computed: {
    hasWorkOrderAppraise() {
      return Boolean(this.details.workOrderAppraise);
    },
    workOrderProcessResult() {
      return this.details.workOrderProcessResult || {};
    },
    workOrderAppraise() {
      return this.details.workOrderAppraise || {};
    },
    actualProcessDay() {
      const actualProcessDay = this.details.actualProcessDay;
      if (isEmpty(actualProcessDay)) return "-";
      return `${timeFormatDHMS(Number(actualProcessDay) * 1000)}`;
    },
    workOrderSubmitFinishResult() {
      return this.details.workOrderSubmitFinishResult || {};
    },
  },
  created() {
    this.getDetails();
    this.getComments();
  },
  mounted() {
    let that = this;
    window.addEventListener(
      "message",
      function (e) {
        console.log(e.data.data, '留言-回复-监听cms是否已返回登录及验证的状态,0:留言,1:回复,"":投诉按钮');
        // 来判断是留言还是回复
        if (e.data) {
          // 留言 0
          if (e.data.name == "loginMsg" && e.data.data.buttonType === 0) that.handleComment();
          // 回复 1
          if (e.data.name == "loginMsg" && e.data.data.buttonType === 1) that.handleSetReplay(that.listItemMsg);
          // 存储来自cms的用户信息
          if (e.data.name == "loginMsg") sessionStorage.setItem("formCmsLoginMsg", JSON.stringify(e.data.data));
        }
      },
      false
    );
  },
  methods: {
    txt2HTML,
    toVerify(type, item) {
      // type为回复时，保存行数据
      this.listItemMsg = item;
      console.log("行数据：", this.listItemMsg);
      // 向父级申请当前用户状态是否为 已登录已验证 状态
      window.parent.postMessage(
        {
          name: "isCertification",
          data: {
            detailId: this.$route.query.id,
            url: "/portals/details",
            buttonType: type, // 0:留言，1:回复
          },
        },
        "\*"
      );
      console.log(type, " - 投诉举报已发送isCertification - 0:留言，1:回复");
    },
    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
    getDetails() {
      portalsApi.workOrder
        .details(this.$route.query.id)
        .then((res) => {
          this.details = res.result;
        })
        .then(() => this.$nextTick(postPortalsHeight));
    },
    getComments() {
      this.commentsLoading = true;
      portalsApi.workOrder
        .comments(this.$route.query.id)
        .then((res) => {
          this.comments = res.result;
        })
        .then(() => this.$nextTick(postPortalsHeight))
        .finally(() => (this.commentsLoading = false));
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    handleComment() {
      const form = { ...this.form };
      if (form.comment.length === 0) return;
      const replayObject = this.replayObject;
      const cmsUserInfo = getCMSUserInfo();
      // form.createUser = cmsUserInfo.userName
      form.publishUsername = cmsUserInfo.userName;
      form.workOrderId = this.$route.query.id;
      let promise = portalsApi.workOrder.addComment;
      if (replayObject.publishUsername) {
        form.parentCommentId = replayObject.id;
        form.parentPublishUsername = replayObject.publishUsername;
        promise = portalsApi.workOrder.addFeedback;
      }

      promise(form).then((res) => {
        this.form.comment = "";
        this.replayObject = {};
        this.getComments();
      });
    },
    handleSetReplay(item) {
      console.log(item);
      this.replayObject = { ...item };
    },
    handleDeleteReplayObject(e) {
      if (this.canDelReplayObject) {
        this.replayObject = {};
        this.canDelReplayObject = false;
        return;
      }
      this.canDelReplayObject = this.form.comment === "";
    },
  },
};
</script>

<style lang="less" scoped>
.comments {
  li {
    padding: 20px 0 20px 60px;
    border-bottom: 1px solid #e8e8e8;

    .info {
      display: flex;
      line-height: 20px;

      .name {
        font-weight: 600;
        color: #0e87f7;
      }

      .type {
        margin: 0 20px;
        font-weight: 400;
        color: #666666;
      }

      .time {
        flex: 1;
        text-align: right;
        color: #666666;
      }

      .replay {
        margin-left: 20px;
        color: @color-primary;
      }
    }

    .content {
      margin-top: 20px;
      color: #666666;
      line-height: 20px;
    }
  }
}

.comments-footer {
  margin-top: 30px;
  display: flex;

  .send-btn {
    margin-left: 10px;
    width: 100px;
    height: 36px;
  }
}

.prompt {
  font-size: 12px;
  color: #0b5fd5;
  line-height: 17px;
  padding: 8.5px 20px;
  background: rgba(114, 195, 255, 0.1);
  border-radius: 2px;
  border: 1px solid #3279f2;
  margin-bottom: 20px;
}
</style>
